<template>
  <div class="preview-pdf">
    <div style="background: #001529;" :class="{'open-width': !collapsed, 'close-width': collapsed}">
      <a-menu
        :default-selected-keys="[0]"
        mode="inline"
        theme="dark"
        :inline-collapsed="collapsed"
      >
        <a-menu-item>
          <a-icon type="file" />
          <span>{{ fileList.title }}</span>
        </a-menu-item>
      </a-menu>
    </div>
    <div class="pdf-content">
      <div class="content-header">
        <a-icon class="header-icon" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapsed"/>
        <h3>档案电子文件预览</h3>
      </div>
      <iframe :src="'http://192.168.1.135:8060' + fileList.url" width="100%" height="100%" frameborder="0"></iframe>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PreviewPdf',
  components: {
  },
  data () {
    return {
      collapsed: true,
      fileList: []
    }
  },
  created () {
    this.fileList = JSON.parse(this.$route.query.file)
  },
  mounted () {},
  methods: {
    // 展开和关闭左侧菜单选项
    toggleCollapsed () {
      this.collapsed = !this.collapsed
    }
  }
}
</script>

<style scoped lang="less">
.preview-pdf {
  width: 100%;
  height: 100%;
  display: flex;
  .pdf-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .content-header {
      position: relative;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: #001529;
      color: #FFF;
      & h3 {
        color: #FFF;
      }
      .header-icon {
        font-size: 25px;
        line-height: 50px;
        position: absolute;
        left: 0;
        top: 0;
        margin: auto
      }
    }
  }
  .open-width {
    width: 256px;
  }
  .close-width {
    width: 80px;
  }
}
</style>
